<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>vue3响应式原理</title>
</head>

<body></body>
<script>
    let user = {
        name: '小明',
        age: 25,
        score: {
            math: 87,
            english: 98,
        },
    };

    // 把目标对象变成代理对象
    // 参数1：user---> target目标对象
    // 参数2：handle--->处理器对象，用来监视数据以及数据的操作
    const userProxy = new Proxy(user, {
        // 获取目标对象的属性值   target代理的对象
        get(target, property) {
            console.log('get方法执行了');
            // 返回一个反射对象
            return Reflect.get(target, property);
        },
        // 修改目标对象的属性值/为目标对象添加新的属性
        set(target, property, value) {
            console.log('set方法调用了');
            return Reflect.set(target, property, value);
        },
        // 删除目标对象的属性
        deleteProperty(target, property) {
            console.log('delete方法调用了');
            return Reflect.deleteProperty(target, property);
        },
    });

    // 更改
    userProxy.name = '小红';
    userProxy.score.math = 100;
    console.log(userProxy, '00000');

    // 删除
    delete userProxy.name
    console.log(user, '====');
</script>

</html>